<template>
	<view class="card">
		<view class="liveCardheader u-flex u-row-between">
			<view class="u-flex u-col-center">
				<view>
					<h3 class="title u-flex u-col-center">{{info.title}}</h3>
				</view>
				<u-tag text="热门" mode="light" size="mini" shape="circle" type="warning" class="u-m-l-10" />
			</view>

		</view>
		<view>
		</view>
		<view class="cardBody">
			<view class="coverBox u-flex u-row-between u-rela" @click="linkTo(info)">
				<view class="left  u-rela">
					<view class="u-flex liverCount" v-if="info.status==1">
						<liveAnimation />
						<span>在线人数:{{info.online_num}}</span>
					</view>
					<span class="liveBack" v-if="info.transcribe===1">回放</span>
					<view v-for="(item, index) in appraiseList" :key="index" class="bubble"
						:class="[item.srcB,item.animaB]" :data-t="item.time">
					</view>

					<view class="iconLiveBox">
						<u-image :src="imgStaticUrl+'/images/praiseIcon/icon-coverLive.png'" class="iconLive" width="60"
							height="46" mode="widthFix" border-radius="12"></u-image>
					</view>
					<u-image :src="info.cover" class="liveCover" width="260" height="260" mode="aspectFill"
						border-radius="12"></u-image>
					<u-image src="/static/images/praiseIcon/icon-appraise.png" class="appraiseIcon" width="40"
						height="40" mode="widthFix"></u-image>
				</view>
				<view class="right">
					<view class="goods">
						<block v-for="(item,index) in info.goods" :key="index">
							<view>
								<u-image :src="item.thumb_url" width="120" height="120" mode="widthFix"
									border-radius="12"> </u-image>
								<text class="goods-price">￥{{item.shop_price}}</text>
							</view>
						</block>
					</view>
					<view>
					<view class="shop-info">
						<view class="shop-title">
							<u-avatar :src="info.shop_logo" size="50" class="u-m-r-10"></u-avatar>
							<text class="title u-col-center">{{info.shop_name}}</text>
						</view>
					</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import liveAnimation from "@/components/liveAnimation"

	export default {
		data() {
			return {
				imgStaticUrl: '',
				appraiseList: [],
				appraiseNum: Math.floor(Math.random() * 100),
			}
		},
		components: {
			liveAnimation
		},
		props: {
			info: {
				type: Object,
				required: true,
				default: () => {
					{}
				}
			}
		},
		mounted() {
			this.imgStaticUrl = this.STATICURL;  // 线上图片地址（兼容微信小程序写法）	
		},
		methods: {
			praiseAction() {

				const randomA = Math.floor(Math.random() * 6) + 1;
				const randomB = Math.floor(Math.random() * 11) + 1; // bl1~bl11
				const time = new Date().getTime()

				const srcB = `b${randomA}`;
				const animaB = `bl${randomB}`;
				let data = {
					srcB,
					animaB,
					time
				}

				this.appraiseList.push(data)
				if (this.appraiseList.length > 30) {
					this.appraiseList.splice(0, this.appraiseList.length - 1)
				}
				this.appraiseNum += 1
			},
			linkTo(item) {
				const params = {
					shop_id: item.shop_id
				}
				// #ifdef APP-PLUS
				this.$u.route({
					url: '/pagesC/live/Audience',
					params
				})
				// #endif
				// #ifdef  MP-WEIXIN || H5
				this.$u.route({
					url: '/platforms/live-player',
					params
				})
				// #endif
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	.card {
		background-color: #fff;
		border-radius: 12upx;
		overflow: hidden;
		padding: 15upx;
		margin: 10rpx auto;
		width: 710rpx;
	}

	.liveCardheader {
		margin-bottom: 15upx;
		display: flex;

		.title {
			font-size: 32upx;
			font-weight: 600;
			line-height: 60rpx;
			padding-left: 5rpx;
			color: #4c4d4e;
		}

		.tipsColor {
			color: #999;
			font-size: 24upx;
		}

	}

	.liverCount {
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 100px;
		display: inline-flex;
		position: absolute;
		bottom: 30upx;
		left: 20upx;
		z-index: 1;
		color: #fff;
		height: 30upx;
		padding-right: 10upx;
		font-size: 24upx;

	}

	.coverBox {
		.right {
			
			height: 260upx;
			width: 410rpx;
			margin-left: 10rpx;
			.goods{
				display: flex;
				justify-content: space-around;
				height: 200rpx;
			}
			.goods-price{
				font-size: 24rpx;
			}
			.shop-title{
				display: flex;
				align-items: flex-end;
				height: 50rpx;
				
				color: #747577;
				font-size: 16rpx;
				.title{
					font-size: 24rpx;
					line-height: 50rpx;
				}
			}
		}

		.left {
			width: 260rpx;
			.appraiseIcon {
				position: absolute;
				bottom: 30upx;
				right: 30upx;
			}

			.iconLiveBox {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				animation: rotate360 5s ease-in-out 0.5s;
				transition: all 2s;
				background-color: rgba($color: #000000, $alpha: 0.3);
				border: 3upx solid rgba($color: #fff, $alpha: 0.8);
				z-index: 1;
				border-radius: 200px;
				padding: 10upx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90upx;
				height: 90upx;
			}
		}
	}

	.notice {
		margin: 20upx 0
	}

	@keyframes rotate360 {
		0% {

			transform: translate(-50%, -50%) rotateY(0);
		}

		50% {
			transform: translate(-50%, -50%) rotateY(360deg);
		}

		100% {
			transform: translate(-50%, -50%) rotateY(0);
		}
	}

	.liveBack {
		background-color: rgba(0, 0, 0, 0.6);
		top: 10upx;
		right: 10upx;
		position: absolute;
		font-size: 24upx;
		color: #fff;
		border-radius: 100px;
		display: inline-block;
		padding: 0 14upx;
		line-height: 1.4;
		z-index: 10;
	}
	
	.shop-info{
		width: 100%;
		display: block;
	}
</style>
